<template>
    <p>Vuex</p>
    <p>count1: {{ this.$store.state.count }}</p>
    <p>count2: {{ count }}</p>
    <P>{{ test }}</P>
    <p>countAlias:{{ countAlias }}</p>
    <p>getters ==============</p>
    <p>countAddFive: {{ countAddFive }}</p>
    <p>countAddFiveAddTen: {{ countAddFiveAddTen }}</p>
    <p>countAddFiveAlias: {{ countAddFiveAlias }}</p>
    <p>Mutations==========</p>
    <button @click="addMut">addMut</button>
    <button @click="addPlayload">addPlayload</button>
    <button @click="add">add</button>
    <button @click="addCommit">addCommit</button>
    <button @click="addAlias">addAlias</button>
    <P>actions========</P>
    <button @click="addActionMut">addActionMut</button>
    <button @click="asyncAddActionMut">asyncAddPlayloadAction</button>
    <button @click="asyncAddPlayloadActionMut">asyncAddPlayloadActionMut</button>
    <button @click="addAction">addAction</button>
    <button @click="addActionDispatch">addActionDispatch</button>
    <button @click="addActionAlias">addActionAlias</button>


    <p>模块========</p>
    <p>模块B中的state数据:{{ $store.state.b.countB }}</p>
    <p>模块B中的getters数据:{{ $store.getters['b/countBB'] }}</p>
    <button @click="commitIncreaseB">触发-moduleB-mutations</button>
    <button @click="commitAsyncIncreaseB">触发-moduleB-mutations</button>

    <p>MaXXXXX</p>
    <p>模块B的state</p>
    <p>countB ::{{ countB }}</p>
    <p>mutations</p>
    <button @click="increaseB">increaseB</button>
</template>
<script>
import {mapState, mapGetters,mapMutations,mapActions} from 'vuex'
export default {
    computed:{
        // count(){
        //     return this.$store.state.count
        // },
        // //数组形式
        // ...mapState(['count','test'])
        ...mapState(['count','text']),
            //count: state =>state.count
        ...mapState({
            count: 'count',
            countAlias:state=>state.count,
        }),
        // countAddFive(){
        //     return this.$store.getters,this.countAddFive
        // },
        // countAddFiveAddTen(){
        //     return this.$store.getters.countAddFiveAddTen
        // }
        //数组写法
        //...mapGetters(['countAddFive','countAddFiveAddTen'])
        ...mapGetters({
            countAddFive:'countAddFive',
            countAddFiveAddTen:'countAddFiveAddTen',
            countAddFiveAlias:'countAddFive'
        }),
        ...mapState("b" ['countB'])
    },
    methods:{
        addMut(){
            this.$store.commit('add')
        },
        addPlayload(){
            this.$store.commit('addPlayload',{num:10})
        },
        //...mapMutations(['add','addPlayload']),
        addCommit(){
            this.addPlayload({num:20})
        },
        ...mapMutations({
            add:'add',
            assAlias:'add',
            addPlayload:'addPlayload'
        }),
        addActionMut(){
            this.$store.dispatch('addAction')
        },
        asyncAddActionMut(){
            this.$store.dispatch('asyncAddAction')
        },
        asyncAddPlayloadActionMut(){
            this.$store.dispatch('asyncAddPlayloadAction',{num:20})
        },
        //...mapActions(['addAction','asyncAddPlayloadAction']),
        addActionDispatch(){
            this.asyncAddPlayloadAction({num:30})
        },
        ...mapActions({
            addAction:'addAction',
            addActionAlias:'addAction',
            asyncAddPlayloadAction:'asyncAddPlayloadAction'

        }),

        // add(state){
        //     state.count++
        // },
        // addPlayload(state,Playload){
        //     state.count +- Playload.num
        // }
    //  asyncAddPlayloadAction({commit},Playload){
    //      setTimeout(()=>{
    //         commit('addPlayload',Playload)
    //     },1000)
    // },
    // addAction({commit}){
    //         commit('add')
    //     },

    commitIncreaseB(){
        this.$store.commit('b/increaseB')
    },
    commitAsyncIncreaseB(){
        this.$store.dispatch('b/asyncIncreaseB')
    },
    ...mapMutations('b' ['increaseB'])
    },
    mounted() {
        console.log(this.$store);
    }
}
</script>